/**
 * 用户表单配置
 * @typedef {Object} FormConfig
 * @property {string} field - 字段名
 * @property {string} label - 标签文本
 * @property {string} component - 组件类型
 * @property {string} [placeholder] - 占位文本
 * @property {Object} [props] - 组件属性
 * @property {boolean} [editDisabled] - 编辑时是否禁用
 * @property {boolean} [hideInEdit] - 编辑时是否隐藏
 * @property {Array} [options] - 选项数据(用于Select/Radio等)
 * @property {Object} [rules] - 验证规则
 */

import { h } from 'vue'
import { ElUpload, ElIcon, ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

/**
 * 用户表单字段配置
 * @type {FormConfig[]}
 */
export const formConfig = [
  {
    field: 'avatarUrl',
    label: '头像',
    component: 'Upload',
    props: {
      class: 'avatar-uploader',
      action: '/commonApi/upload',
      showFileList: false,
      autoUpload: true,
      accept: 'image/jpeg,image/png',
      limit: 1,
      data: {
        filePath: 'avatar',
      },
    },
    render: (form) => {
      return h('div', { class: 'avatar-upload' }, [
        h(
          ElUpload,
          {
            class: 'avatar-uploader',
            action: '/commonApi/upload',
            'show-file-list': false,
            'auto-upload': true,
            accept: 'image/jpeg,image/png',
            data: {
              filePath: 'avatar',
            },
            'before-upload': (file) => {
              const isImage = /^image\/(jpeg|png)$/.test(file.type)
              const isLt2M = file.size / 1024 / 1024 < 2

              if (!isImage) {
                ElMessage.error('只能上传 JPG/PNG 格式的图片！')
                return false
              }
              if (!isLt2M) {
                ElMessage.error('图片大小不能超过 2MB！')
                return false
              }
              return true
            },
            'on-success': (response) => {
              if (response.code !== 1) {
                ElMessage.error('上传失败')
              } else {
                form.avatarUrl = response.data
                ElMessage.success('上传成功')
              }
            },
            'on-error': (error) => {
              console.error('上传失败:', error)
              ElMessage.error('上传失败，请重试')
            },
          },
          {
            default: () => {
              return form.avatarUrl
                ? [
                    h('img', {
                      src: form.avatarUrl,
                      class: 'avatar',
                      style: {
                        width: '100px',
                        height: '100px',
                        objectFit: 'cover',
                        borderRadius: '4px',
                        border: '1px solid var(--el-border-color-lighter)',
                      },
                    }),
                  ]
                : [
                    h('div', { class: 'upload-placeholder' }, [
                      h(ElIcon, { class: 'upload-icon' }, () => h(Plus)),
                    ]),
                  ]
            },
            tip: () => h('div', { class: 'el-upload__tip' }, '支持 jpg/png 格式，大小不超过 2MB'),
          },
        ),
      ])
    },
  },
  {
    field: 'username',
    label: '用户名',
    component: 'Input',
    placeholder: '请输入用户名',
    editDisabled: true, // 编辑时禁用
    rules: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 10, message: '长度在 2 到 20 个字符', trigger: 'blur' },
    ],
  },
  {
    field: 'password',
    label: '密码',
    component: 'Input',
    placeholder: '请输入密码',
    props: {
      type: 'password',
      showPassword: true,
    },
    hideInEdit: true, // 编辑时隐藏密码字段
    rules: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
    ],
  },
  {
    field: 'nickname',
    label: '昵称',
    component: 'Input',
    placeholder: '请输入昵称',
    rules: [
      { required: true, message: '请输入昵称', trigger: 'blur' },
      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
    ],
  },
  {
    field: 'status',
    label: '状态',
    component: 'Radio',
    defaultValue: '1',
    options: [
      { label: '启用', value: '1' },
      { label: '禁用', value: '0' },
    ],
  },
  {
    field: 'phone',
    label: '手机号',
    component: 'Input',
    placeholder: '请输入手机号',
    rules: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
  },
  {
    field: 'email',
    label: '邮箱',
    component: 'Input',
    placeholder: '请输入邮箱',
    rules: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
  },
  {
    field: 'homeUrl',
    label: '主页地址',
    component: 'Input',
    placeholder: '请输入主页地址',
    props: {
      type: 'url',
    },
  },
  {
    field: 'tagInfo',
    label: '简介标签',
    component: 'Input',
    placeholder: '请输入标签',
    rules: [
      { required: true, message: '请输入标签', trigger: 'blur' },
      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
    ],
  },
  {
    field: 'sign',
    label: '个人签名',
    component: 'Input',
    placeholder: '请输入个人签名',
    props: {
      type: 'textarea',
      rows: 4,
      maxlength: 200,
      showWordLimit: true,
    },
  },
]

/**
 * 获取表单默认值
 * @returns {Object} 默认值对象
 */
export const getDefaultFormData = () => {
  return {
    id: '',
    username: '',
    password: '',
    nickname: '',
    avatarUrl: '',
    phone: '',
    email: '',
    homeUrl: '',
    sign: '',
    status: '1',
  }
}
